<template>
  <div id="app">
    <!--导航栏-->
    <!--   主体部分 -->
    <div class="body_content">
      <!-- 首页导航栏 -->
      <div class="floor_nav">
        <div class="blog_nav">
          <div class="blog-nav-tag">
            <ul class="def">
              <li class="menustitle" title="后端">
                <a @click="findTypeAll('后端')">
                  后端
                </a>
              </li>
              <li class="menustitle" title="前端">
                <a @click="findTypeAll('前端')">
                  前端
                </a>
              </li>
              <li class="menustitle" title="移动开发">
                <a @click="findTypeAll('移动开发')">
                  移动开发
                </a>
              </li>
              <li class="menustitle" title="编程语言">
                <a @click="findTypeAll('编程语言')">
                  编程语言
                </a>
              </li>
              <li class="menustitle" title="Java">
                <a @click="findTypeAll('Java')">
                  Java
                </a>
              </li>
              <li class="menustitle" title="Python">
                <a @click="findTypeAll('Python')">
                  Python
                </a>
              </li>
              <li class="menustitle" title="人工智能">
                <a @click="findTypeAll('人工智能')">
                  人工智能
                </a>
              </li>
              <li class="menustitle" title="大数据">
                <a @click="findTypeAll('大数据')">
                  大数据
                </a>
              </li>
              <li class="menustitle" title="数据结构与算法">
                <a @click="findTypeAll('数据结构与算法')">
                  数据结构与算法
                </a>
              </li>
              <li class="menustitle" title="音视频">
                <a @click="findTypeAll('音视频')">
                  音视频
                </a>
              </li>
              <li class="menustitle" title="云原生">
                <a @click="findTypeAll('云原生')">
                  云原生
                </a>
              </li>
              <li class="menustitle" title="云平台">
                <a @click="findTypeAll('云平台')">
                  云平台
                </a>
              </li>
              <li class="menustitle" title="运维">
                <a @click="findTypeAll('运维')">
                  运维
                </a>
              </li>
              <li class="menustitle" title="服务器">
                <a @click="findTypeAll('服务器')">
                  服务器
                </a>
              </li>
              <li class="menustitle" title="操作系统">
                <a @click="findTypeAll('操作系统')">
                  操作系统
                </a>
              </li>
              <li class="menustitle" title="数据库管理">
                <a @click="findTypeAll('数据库管理')">
                  数据库管理
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- /首页导航栏 -->
      <div class="home_title">
        <div class="check_body">
          <div class="menu-center">
              <input class="search-container" stype="text" v-model="check" value placeholder="智能对话机器人" />
              <button class="search-button" @click="findNewsAll(check)">
                <span>搜索</span>
              </button>
          </div>
        </div>
      </div>
      <!-- 列表内容栏 -->
      <div class="home_list">
        <div class="www-home">
          <div class="www-home-left" style="min-height: 300px;">
            <table>
              <thead>
              <tr>
                <td class="table_title">
                  <a href="/"><span>关注</span></a>
                  <a href="/"><span>推荐</span></a>
                  <a href="/"><span>资讯</span></a>
                  <a href="/"><span>热榜</span></a>
                  <a href="/"><span>专家推荐</span></a>
                </td>
                <td class="table_title_more">
                </td>
              </tr>
              </thead>
              <tbody>
                <tr v-for="item in tableData">
                  <td colspan="2">
                    <div class="table_list">
                      <div class="list_hr"></div>
                      <div class="list_body">
                        <div class="list_title">
                          <a @click="toConsult(item.id)"><span>{{item.newHead}}</span></a>
                        </div>
                        <div class="list_constant">
                          <a @click="toConsult(item.id)"><span>{{item.newsBody}}</span></a>
                          <a href="/"><span>类别:{{item.name}}&nbsp;&nbsp;&nbsp;&nbsp;作者:{{item.createName}}&nbsp;&nbsp;&nbsp;&nbsp;发布时间:{{item.newsTime}}</span></a>
                        </div>
                      </div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <!-- /列表内容栏 -->

    </div>

    <!--footer -->
    <Footer>
    </Footer>
  </div>
</template>

<script>
  import Header from '../components/Header';
  import Footer from '../components/Footer';
  import token from '../components/token';
  export default {
    name: 'Check',
    components: {
      Header,
      Footer
    },
    data() {
      return {
        check: token.checkvalue,
        arr: ['女', '男'],
        tableData: [{}] /*查询所有博客*/ ,
        User: {},
        typename: "",
        d: {} /*查询单个博客*/ ,
        dialogTableVisible: false,
        dialogFormVisible: false,
        updateFormVisible: false,
        formLabelWidth: '120px'
      };
    },
    methods: {
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function(size) {
        this.pagesize = size;
        console.log(this.pagesize); //每页下拉显示数据
      },
      handleCurrentChange: function(currentPage) {
        this.currentPage = currentPage;
        console.log(this.currentPage); //点击第几页
      },

      /*颜色*/
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      /*查询所有的资讯*/
      findAll() {
        let _this = this;
        this.$axios
          .get('http://localhost:8087/news/selectNews')
          .then(function(res) {
            _this.tableData = res.data;
            console.log(res.data);
          })
          .catch(function(err) {
            alert('查询失败');
          });
      },
      /*单个id查询博客*/
      findUserById(id) {
        this.updateFormVisible = true
        let _this = this
        console.log(id)
        this.$axios.get("http://localhost:8087/user/getUserById/" + id).then(function(res) {
          _this.d = res.data
          console.log(res.data)
        }).catch(function(err) {
          alert('请登陆哦~')
        })
      },
      /*模糊查询某类型的资讯*/
      findTypeAll(type){
        console.log(type)
        let _this = this
        this.$axios.post("http://localhost:8087/news/selectNewsByType/"+type).then(function(res){
          if(res.data.length<=0){
            alert('该标签，暂无内容哦~');
          }else{
            console.log('查询到的数据'+res.data)
            _this.tableData = res.data;
            console.log(res.data);
          }
        }).catch(function (err) {
          alert('查询失败')
        })
      },
      /*模糊查询内容的资讯*/
      findNewsAll(type){
        console.log(type)
        let _this = this
        this.$axios.post("http://localhost:8087/news/selectNewsByAll/"+type).then(function(res){
          if(res.data.length<=0){
            alert('该标签，暂无内容哦~');
          }else{
            console.log('查询到的数据'+res.data)
            _this.tableData = res.data;
            console.log(res.data);
          }
        }).catch(function (err) {
          alert('查询失败')
        })
      },
      /*单个列表*/
        toConsult(id) {
          this.$router.push({
            name: 'Consult',
            params: {
              id: id
            }
          });
        },
    },
    created() {
       this.findUserById(localStorage.getItem("id"));
      this.findNewsAll(token.checkvalue);
    }
  };
</script>

<style scoped>
  .body_content {
    width: 100%;
  }

  .floor_nav {
    margin-top: 10px;
    height: 72px;
    width: 100%;
  }

  .blog_nav {
    width: 1380px;
    margin: 10px auto 0;
    -webkit-box-shadow: 0 4px 30px 0 rgba(232, 232, 237, .5);
    box-shadow: 0 4px 30px 0 rgba(232, 232, 237, .5);
    border-radius: 4px;
  }

  .blog-nav-tag {
    width: 100%;
    height: 72px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: center;
    background: #fff;
    position: relative;
  }

  .blog-nav-tag ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
    padding-bottom: 8px;
    top: 0;
    width: auto;
    height: 100%;
    float: left;
    list-style: none;
    display: block;
  }

  .menustitle a {
    text-decoration: none;
    font-family: "PingFang SC,Hiragino Sans GB,Arial,Microsoft YaHei,Verdana,Roboto,Noto,Helvetica Neue,sans-serif";
    font-size: 15px;
    display: block;
    height: 100%;
    color: inherit;
    padding: 0 15px;
  }

  .home_title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 1380px;
    height: 80px;
  }
  .check_body{
    width: 1000px;
    height: 60px;
  }
  .menu-center{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
  }
  .menu-center button span {
       margin-top: -3px;
       display: inline-block;
       vertical-align: top;
       color: #fff;
   }
  .search-container{
        ont-size: 14px;
        display: inline-block;
        width: calc(100% - 304px);
        height: 60%;
        line-height: inherit;
        border: 0 none;
        outline: 0;
        background: #f5f6f7;
        color: #222226;
        vertical-align: top;
        text-indent: 32px;
        border: 1px solid #e8e8ed;
        border-right: none;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 16px 0 0 16px;
  }
  .search-button{
        display: inline-block;
        width: 88px;
        height: 60%;
        outline: 0;
        border: 0 none;
        border-radius: 0 16px 16px 0;
        font-size: 14px;
        line-height: 32px;
        cursor: pointer;
        -webkit-transition: all .2s ease-in;
        transition: all .2s ease-in;
        background-color: #fc5531;
        text-align: center;
  }
  #kp_box_ww9877 {
    width: 100%;
    margin-top: 50px;
  }

  .home_list {
    margin-top: 26px;
    margin-bottom: 24px;
    min-height: 1080px;
    width: 1380px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .www-home {
    width: 100%;
    background: #fff;
    padding-top: 16px;
  }
  .www-home>div {
    width: 1380px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .table_title {
    height: 48px;
  }
  .table_title span {
    font-size: 16px;
    color: #999AAA;
    margin-right: 56px;
    position: relative;
    line-height: 56px;
    cursor: pointer;
  }
  .table_title_more span {
    font-size: 16px;
    color: #999AAA;
  }
  .table_list {
    width: 1015px;
    min-height: 80px;
  }
  .list_hr {
    height: 1px;
    background-color: #f5f6f7;
    margin: auto;
  }
  .list_title span {
    padding-top: 10px;
    font-size: 18px;
    font-weight: 500;
    color: #222226;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-family: "微软雅黑";
    font-weight: bold;
    -webkit-line-clamp: 1;
    line-height: 25px;
  }

  .list_constant span {
    padding-top: 10px;
    padding-left: 20px;
    max-height: 48px;
    -webkit-line-clamp: 2;
    color: #999AAA;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  a {
    text-decoration: none !important;
  }
</style>
